<template>
	<div>
	  <div class="wrap">
	  		<div class="trade-top">
	  			<div class="location ellipsis">
	  				<i class="location-icon"></i>
	  				<span>成都</span>
	  			</div>
	  			<div class="search-wraper">
					<i class="search-icon"></i>
					<span>请输入搜索内容</span>
	  			</div>
	  		</div>
	  		<div class="banner-wraper">
	  			<swiper loop auto height="170px">
	  				<swiper-item class="black" v-for="(ban,index) in banner" :key="ban.id">
	  					<a class="index-banner" target="_blank" v-bind:style="{backgroundImage: 'url(' + ban.pic+'?imageView2/2/w/500)'}" :href="ban.uri"></a>
	  				</swiper-item>
	  			</swiper>
	  		</div>
	  		<div class="main-panel vux-1px-b">
	  			<a class="buy_panel vux-1px-r" :href="'#/trade/demands'"></a>
	  			<a class="sale_panel" :href="'#/trade/supplies'"></a>
	  		</div>
	  		<div class="release-wraper">
	  			<a class="rel-bnt">发布供求</a>
	  		</div>
	  		<div class="hot-wrap">
		  		<div class="hot-tittle">
		  			<i class="hot-icon"></i>
		  			<span>当季热卖</span>
		  		</div>
		  		<div class="load_wrap" v-if="supplyloading==true">
					<div class="text-warning text-center" v-if="supplyStatus === 'loading'">
						<i class="fa fa-spinner fa-pulse"></i>
						数据加载中...
					</div>
					<div class="text-warning text-center loading_err" v-if="supplyStatus === 'error'" v-click="getList()">
						<i class="fa fa-frown-o"></i>
						加载失败，点击刷新
					</div>
				</div>
				<div class="hot-fish-wraper" v-else>
			  		<ul class="hot-fish-ul" >
			          <li class="hot-fish-item" v-for="(data,index) in kind">
			          	<a :href="'#/trade/kind/' + data.id ">
			          		<div class="hot-fish-img" v-bind:style="{backgroundImage: 'url(' + data.img_view+'?imageView2/2/w/200)'}"></div>
			          		<div class="hot-fish-name">
			          			<div class="name-v"><span class="ellipsis-2">{{data.name}}</span></div>
			          		</div>
		          		</a>
			          </li>
			        </ul>
		      	</div>
		  	</div>
		  	<div class="demand-list">
	  			<div class="demand-list-wrap">
	  				<div class="list-tittle vux-1px-b">
	  					<div class="tittle-lm">
	  						<i class="demand-lm-icon"></i>
	  						<span>求购</span>
	  					</div>
	  					<a class="more-icon" :href="'#/trade/demands'"></a>
	  				</div>
	  				<div class="load_wrap" v-if="demandloading==true">
  						<div class="text-warning text-center" v-if="demandStatus === 'loading'">
							<i class="fa fa-spinner fa-pulse"></i>
							数据加载中...
						</div>
						<div class="text-warning text-center loading_err" v-if="demandStatus === 'error'" v-click="getList()">
							<i class="fa fa-frown-o"></i>
							加载失败，点击刷新
						</div>
  					</div>
	  				<div class="demand-list-item" v-for="(data,index) in demandList" v-else>
	  					<a :href="'#/trade/demand/' + data.id ">
		  					<div class="buy-wraper line-one">
		  						<div class="buy-name ellipsis">{{data.kind_name}}</div>
		  						<div class="buy-stone ellipsis">求购：<big>{{data.stock}}</big><span>斤</span></div>
		  					</div>
		  					<div class="buy-wraper line-two">
		  						<div class="buy-address ellipsis">
		  							<label class="address-wrapper ellipsis">
			  							<i class="address-icon"></i>
										<span>{{data.province_name}}</span>
										<span>{{data.city_name}}</span>
									</label>
									<label class="wl" v-show="data.logistics===1">
										<i class="wl-car"></i>
										<span>物流</span>
									</label>
		  						</div>
		  						<div class="buy-size ellipsis">规格：
		  							<label v-if="data.size_unit_name"><span>{{data.size_min}}</span>-<span>{{data.size_max}}</span><span>{{data.size_unit_name}}</span></label>
		  							<label v-else>不限</label>
		  						</div>
		  					</div>
		  					<div class="buy-wraper line-three">
		  						<div class="buy-autor">
		  							<span class="name ellipsis"><span v-if="data.verify_classify" v-text="data.verify_name"></span><span v-else v-text="data.contact_name"></span></span>
									<span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
									<span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
									<span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
									<span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
									<span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
									<span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
									<span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
									<span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
		  						</div>
		  						<div class="buy-time ellipsis">{{data.updated_view}}</div>
		  					</div>
		  					<div class="buy-requirement ellipsis" v-if="data.desc_tag.length || data.desc">
		  						具体要求：
	  							<span v-for="tab in data.desc_tag">{{tab}}</span>
	  							<label>{{data.desc}}</label>
		  					</div>
		  				</a>
	  				</div>
	  			</div>
	  			<div class="read-more vux-1px-t">
	  				<a class="more-ifo" :href="'#/trade/demands'">查看更多</a>
	  			</div>
	  		</div>
	  		<div class="supply-list">
				<div class="supply-list-wrap">
					<div class="list-tittle vux-1px-b">
	  					<div class="tittle-lm">
	  						<i class="supply-lm-icon"></i>
	  						<span>供应</span>
	  					</div>
	  					<a class="more-icon" :href="'#/trade/supplies'"></a>
	  				</div>
	  				<div class="load_wrap" v-if="supplyloading==true">
  						<div class="text-warning text-center" v-if="supplyStatus === 'loading'">
							<i class="fa fa-spinner fa-pulse"></i>
							数据加载中...
						</div>
						<div class="text-warning text-center loading_err" v-if="supplyStatus === 'error'" v-click="getList()">
							<i class="fa fa-frown-o"></i>
							加载失败，点击刷新
						</div>
  					</div>
					<div class="supply-list-item vux-1px-b" v-for="(data,index) in supplyList" v-else>
						<a :href="'#/trade/supply/' + data.id ">
							<div class="item-img vux-1px" v-bind:style="{backgroundImage: 'url(' + data.img_view[0]+'?imageView2/2/w/200)'}"><label v-show="data.img.length>1">多图</label></div>
							<div class="item-ifo">
								<div class="ifo-wrap">
									<div class="ifo-wrap-cell">
										<div class="goods-msg clearfix">
											<div class="goods-name ellipsis-2">
												<i class="pre-label" v-show="data.sale_type==2">预售</i>
												<span class="name">{{data.kind_name}}{{data.title}}</span>
											</div>
											<div class="goods-price">
												<div class="pre-date ellipsis" v-if="data.sale_type==2">
													<span class="pre-time ellipsis">{{data.sale_pre.month}}月{{data.sale_pre.day}}上市</span>
												</div>
												<div class="price" v-else>
													<label v-if="data.price_type==2" class="face">面议</label>
													<label v-else><big>{{data.price}}</big>元/{{data.price_unit_name}}</label>
												</div>
											</div>
										</div>
										<div class="goods-from">
											<div class="goods-address ellipsis">
												<i class="address-icon"></i>
												<span>{{data.province_name}}</span>
												<span>{{data.city_name}}</span>
											</div>
											<div class="goods-size">
												<label <label v-if="data.size_unit_name">
													<span>{{data.size_min}}-{{data.size_max}}{{data.size_unit_name}}</span>
												</label>
												<label v-else>规格不限</label>
											</div>
										</div>
										<div class="goods-seller">
											<div class="seller">
												<label class="name ellipsis">
													<span v-if="data.verify_classify" >{{data.verify_name}}</span>
													<span v-else>{{data.contact_name}}</span>
												</label>
												<span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
												<span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
												<span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
												<span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
												<span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
												<span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
												<span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
												<span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
											</div>
											<div class="data ellipsis">{{data.updated_view}}</div>
										</div>
									</div>
								</div>
							</div>
						</a>
					</div>
				</div>
				<div class="read-more">
  					<a class="more-ifo" :href="'#/trade/supplies'">更多</a>
  				</div>
	  		</div>
	  		<div class="shop-list">
				<div class="list-tittle vux-1px-b">
					<div class="tittle-lm">
						<i class="shop-lm-icon"></i>
						<span>每日好店</span>
					</div>
					<a class="more-icon" :href="'#/trade/shops'"></a>
				</div>
				<div class="load_wrap" v-if="shoploading==true">
					<div class="text-warning text-center" v-if="shopStatus === 'loading'">
						<i class="fa fa-spinner fa-pulse"></i>
						数据加载中...
					</div>
					<div class="text-warning text-center loading_err" v-if="shopStatus === 'error'" v-click="getList()">
						<i class="fa fa-frown-o"></i>
						加载失败，点击刷新
					</div>
				</div>
	  			<div class="shop-list-wraper" v-else>
	  				<div class="shop-list-item" v-for="(data,index) in shopList">
	  					<a :href="'#/trade/shop/' + data.id ">
		  					<div class="item-shop-ifo">
		  						<div class="shop-portrait" v-bind:style="{backgroundImage: 'url(' + data.avatar_view+'?imageView2/2/w/100)'}"></div>
		  						<div class="shop-tittle">
		  							<div class="shop-table">
		  								<div class="shop-table-cel">
				  							<div class="shop-name ellipsis">
				  								<span v-if="data.verify_classify">{{data.verify_name}}</span>
				  								<span v-else>{{data.contact_name}}</span>
				  							</div>
				  							<span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
											<span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
											<span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
											<span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
											<span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
											<span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
											<span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
											<span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
				  						</div>
				  					</div>
		  						</div>
		  					</div>
		  					<div class="shop-shelve clearfix">
		  						<div class="sale ellipsis" v-if="data.kind_supply.length"><i class="sale-icon"></i><span v-for="kind in data.kind_supply">{{kind.name}}</span></div>
		  						<div class="buy ellipsis" v-if="data.kind_demand.length"><i class="buy-icon"></i><span v-for="kind in data.kind_demand">{{kind.name}}</span></div>
		  					</div>
		  				</a>
	  				</div>
	  			</div>
	  		</div>
	  	</div>
	 </div>
</template>

<script>
import {Swiper, SwiperItem } from 'vux'

export default {
	data () {
    return {
		banner:[],
	    supplyList:[],
	    demandList:[],
	    shopList:[],
	    banner:[],
	    kind:[],
	    supplyloading:true,
	    demandloading:true,
	    shoploading:true,
	    kindloading:true,
	    supplyStatus:"loading",
	    demandStatus:"loading",
	    shopStatus:"loading",
	    kindStatus:"loading"
    	}
	},
  methods: {

	},
  mounted() {
	axios.get('/api/trade/index/getBanner').then(ret => {
    	this.banner = ret.data.resp_data;
    	console.log(this.banner)
    });
    axios.get('/api/trade/index/getDemandList').then(ret => {
    	this.demandList = ret.data.resp_data;
    	this.demandloading =false
    	}, function (err) {
        this.demandloading =false;
        this.demandStatus="error"
    });
    axios.get('/api/trade/index/getSupplyList').then(ret => {
    	this.supplyList = ret.data.resp_data;
    	this.supplyloading =false
    	}, function (err) {
        this.supplyloading =false;
        this.supplyStatus="error"
    });
    axios.get('/api/trade/index/getShopList').then(ret => {
    	this.shopList = ret.data.resp_data;
    	this.shoploading =false
    	}, function (err) {
        this.shoploading =false;
        this.shopStatus="error"
    });
    axios.get('/api/trade/index/getInfoSub?page_size=5').then(ret => {
    	this.kind= ret.data.resp_data.kindList;
    	this.kindloading =false
    	}, function (err) {
        this.kindloading =false;
        this.kindStatus="error"
    })
    
	},
  computed: {

	},
  components: {
    Swiper,
    SwiperItem
  	}
}
</script>

<style>
	@import url("../../styles/common/trade/trade-common.css");
	@import url("../../styles/common/trade/trade-index.css");
</style>
